Prestandaoptimering i JavaScript: Code Splitting vs. Lazy Evaluation

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    

      Laddar...
}>
        
      
    

I det här exemplet laddas OtherComponent endast när den renderas. Medan den laddas kommer användaren att se meddelandet "Laddar...".

Verktyg för Code Splitting

• Webpack: En populär modul-paketerare som stöder olika tekniker för code splitting.
• Rollup: En annan modul-paketerare som fokuserar på att skapa små, effektiva paket.
• Parcel: En paketerare utan konfiguration som automatiskt hanterar code splitting.
• Vite: Ett byggverktyg som utnyttjar inbyggda ES-moduler för snabb utveckling och optimerade produktionsbyggen.

Lazy Evaluation: Att skjuta upp beräkningar

Vad är Lazy Evaluation?

Lazy evaluation, även känd som uppskjuten utvärdering, är en programmeringsteknik där utvärderingen av ett uttryck fördröjs tills dess värde faktiskt behövs. Med andra ord utförs beräkningar endast när deras resultat krävs, istället för att ivrigt beräkna dem i förväg.

Föreställ dig att du förbereder en flerrättersmiddag. Du skulle inte laga varje rätt på en gång. Istället skulle du förbereda varje rätt först när det är dags att servera den. Lazy evaluation fungerar på liknande sätt och utför beräkningar endast när deras resultat behövs.

Hur Lazy Evaluation fungerar

I JavaScript kan lazy evaluation implementeras med olika tekniker:

• Funktioner: Att omsluta ett uttryck i en funktion låter dig skjuta upp dess utvärdering tills funktionen anropas.
• Generatorer: Generatorer ger ett sätt att skapa iteratorer som producerar värden vid behov.
• Memoization: Memoization innebär att cache-lagra resultaten av kostsamma funktionsanrop och returnera det cachade resultatet när samma indata förekommer igen.
• Proxies: Proxies kan användas för att fånga upp åtkomst till egenskaper och skjuta upp beräkningen av egenskapsvärden tills de faktiskt efterfrågas.

Fördelar med Lazy Evaluation

• Förbättrad prestanda: Genom att skjuta upp onödiga beräkningar kan lazy evaluation avsevärt förbättra prestandan, särskilt när man hanterar stora datamängder eller komplexa beräkningar.
• Minskad minnesanvändning: Lazy evaluation kan minska minnesanvändningen genom att undvika skapandet av mellanliggande värden som inte behövs omedelbart.
• Ökad responsivitet: Genom att undvika onödiga beräkningar under den initiala laddningen kan lazy evaluation öka applikationens responsivitet.
• Oändliga datastrukturer: Lazy evaluation låter dig arbeta med oändliga datastrukturer, som oändliga listor eller strömmar, genom att endast beräkna de nödvändiga elementen vid behov.

Exempel: Lazy Loading av bilder

Ett vanligt användningsfall för lazy evaluation är lazy loading (lat laddning) av bilder. Istället för att ladda alla bilder på en sida direkt kan du skjuta upp laddningen av bilder som inte är synliga i visningsområdet från början. Detta kan avsevärt förbättra den initiala sidladdningstiden och minska förbrukningen av nätverksbandbredd.

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  images.forEach((img) => {
    observer.observe(img);
  });
}

document.addEventListener('DOMContentLoaded', lazyLoadImages);

Detta exempel använder IntersectionObserver API:et för att upptäcka när en bild kommer in i visningsområdet. När en bild är synlig sätts dess src-attribut till värdet av dess data-src-attribut, vilket utlöser laddningen av bilden. Observatören slutar sedan observera bilden för att förhindra att den laddas igen.

Exempel: Memoization

Memoization kan användas för att optimera kostsamma funktionsanrop. Här är ett exempel:

function memoize(func) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = func(...args);
    cache[key] = result;
    return result;
  };
}

function expensiveCalculation(n) {
  // Simulera en tidskrävande beräkning
  for (let i = 0; i < 100000000; i++) {
    // Gör något
  }
  return n * 2;
}

const memoizedCalculation = memoize(expensiveCalculation);

console.time('Första anropet');
console.log(memoizedCalculation(5)); // Första anropet - tar tid
console.timeEnd('Första anropet');

console.time('Andra anropet');
console.log(memoizedCalculation(5)); // Andra anropet - returnerar cachat värde direkt
console.timeEnd('Andra anropet');

I det här exemplet tar memoize-funktionen en funktion som indata och returnerar en memoiserad version av den funktionen. Den memoiserade funktionen cachar resultaten från tidigare anrop, så att efterföljande anrop med samma argument kan returnera det cachade resultatet utan att exekvera originalfunktionen på nytt.

Code Splitting vs. Lazy Evaluation: Viktiga skillnader

Även om både code splitting och lazy evaluation är kraftfulla optimeringstekniker, adresserar de olika aspekter av prestanda:

• Code Splitting: Fokuserar på att minska den initiala paketstorleken genom att dela upp kod i mindre delar och ladda dem vid behov. Det används främst för att förbättra den initiala sidladdningstiden.
• Lazy Evaluation: Fokuserar på att skjuta upp beräkningen av värden tills de faktiskt behövs. Det används främst för att förbättra prestandan när man hanterar kostsamma beräkningar eller stora datamängder.

I grund och botten minskar code splitting mängden kod som behöver laddas ner initialt, medan lazy evaluation minskar mängden beräkningar som behöver utföras initialt.

När man ska använda Code Splitting vs. Lazy Evaluation

Code Splitting

• Stora applikationer: Använd code splitting för applikationer med en stor mängd JavaScript-kod, särskilt de med flera rutter eller funktioner.
• Förbättra initial laddningstid: Använd code splitting för att förbättra den initiala sidladdningstiden och minska tiden till interaktivitet.
• Minska nätverksbandbredd: Använd code splitting för att minska mängden data som behöver överföras över nätverket.

Lazy Evaluation

• Kostsamma beräkningar: Använd lazy evaluation för funktioner som utför kostsamma beräkningar eller har åtkomst till stora datamängder.
• Förbättra responsivitet: Använd lazy evaluation för att förbättra applikationens responsivitet genom att skjuta upp onödiga beräkningar under den initiala laddningen.
• Oändliga datastrukturer: Använd lazy evaluation när du arbetar med oändliga datastrukturer, som oändliga listor eller strömmar.
• Lazy Loading av media: Implementera lazy loading för bilder, videor och andra mediatillgångar för att förbättra sidladdningstiderna.

Att kombinera Code Splitting och Lazy Evaluation

I många fall kan code splitting och lazy evaluation kombineras för att uppnå ännu större prestandaförbättringar. Till exempel kan du använda code splitting för att dela upp din applikation i mindre delar och sedan använda lazy evaluation för att skjuta upp beräkningen av värden inom dessa delar.

Tänk på en e-handelsapplikation. Du kan använda code splitting för att dela upp applikationen i separata paket för produktlistningssidan, produktdetaljsidan och kassasidan. Sedan, inom produktdetaljsidan, kan du använda lazy evaluation för att skjuta upp laddningen av bilder eller beräkningen av produktrekommendationer tills de faktiskt behövs.

Utöver Code Splitting och Lazy Evaluation: Ytterligare optimeringstekniker

Även om code splitting och lazy evaluation är kraftfulla tekniker, är de bara två bitar i pusslet när det gäller prestandaoptimering av JavaScript. Här är några ytterligare tekniker som du kan använda för att ytterligare förbättra prestandan:

• Minifiering: Ta bort onödiga tecken (t.ex. blanksteg, kommentarer) från din kod för att minska dess storlek.
• Komprimering: Komprimera din kod med verktyg som Gzip eller Brotli för att ytterligare minska dess storlek.
• Cache-lagring: Utnyttja webbläsarens cache och CDN-cache för att minska antalet anrop till din server.
• Tree Shaking: Ta bort oanvänd kod från dina paket för att minska deras storlek.
• Bildoptimering: Optimera bilder genom att komprimera dem, ändra storlek på dem till lämpliga dimensioner och använda moderna bildformat som WebP.
• Debouncing och Throttling: Kontrollera i vilken takt händelsehanterare exekveras för att förhindra prestandaproblem.
• Effektiv DOM-manipulation: Minimera DOM-manipulationer och använd effektiva tekniker för DOM-manipulation.
• Web Workers: Avlasta beräkningsintensiva uppgifter till web workers för att förhindra att de blockerar huvudtråden.

Slutsats

Prestandaoptimering av JavaScript är en avgörande aspekt för att leverera en positiv användarupplevelse och uppnå affärsmål. Code splitting och lazy evaluation är två kraftfulla tekniker som avsevärt kan förbättra prestandan genom att minska initiala laddningstider, minska förbrukningen av nätverksbandbredd och skjuta upp onödiga beräkningar. Genom att förstå hur dessa tekniker fungerar och när man ska använda dem kan du skapa snabbare, mer responsiva och trevligare webbapplikationer.

Kom ihåg att ta hänsyn till dina specifika applikationskrav och använda de tekniker som är mest lämpliga för dina behov. Övervaka kontinuerligt din applikations prestanda och iterera på dina optimeringsstrategier för att säkerställa att du levererar den bästa möjliga användarupplevelsen. Omfamna kraften i code splitting och lazy evaluation för att skapa webbapplikationer som inte bara är funktionsrika utan också högpresterande och en fröjd att använda, över hela världen.

Resurser för vidare lärande

• Webpack Documentation: https://webpack.js.org/
• Rollup Documentation: https://rollupjs.org/guide/en/
• Vite Documentation: https://vitejs.dev/
• MDN Web Docs - Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• Google Developers - Optimize JavaScript Execution: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/